<template>
	<view>
		<view class="main">
			<view class="headers">
				<view class="imgs">
					<image src="../../static/logo.png" mode=""></image>
				</view>
			</view>

			<view class="formbox">
				<uni-forms :model="form" labelWidth="120rpx" label-align="center">
					<uni-forms-item label="账号:" required>
						<uni-easyinput v-model="form.account" placeholder="请输入账号" />
					</uni-forms-item>
					<uni-forms-item label="密码:" required>
						<uni-easyinput
							type="password"
							v-model="form.password"
							placeholder="请输入密码"
						/>
					</uni-forms-item>
					<uni-forms-item label="验证码:" required>
						<view class="_rows">
							<uni-easyinput
								v-model="codes.codeVal"
								placeholder="请输入验证码"
							/>
							<image
								@click="upDateImg"
								style="width: 200rpx; height: 80rpx"
								:src="codes.validCodeBase64"
								mode=""
							></image>
						</view>
					</uni-forms-item>
				</uni-forms>
			</view>
		</view>

		<button
			style="width: 80%; margin-top: 48rpx"
			type="primary"
			@click="onLogin"
		>
			登录
		</button>
	</view>
</template>

<script setup>
import { login, getPicCaptcha } from '../../api/login/index.js'

import { reactive, ref } from 'vue'

import sm from 'sm-crypto'

const sm2 = sm.sm2
const cipherMode = 0 // 1 - C1C3C2，0 - C1C2C3，默认为1

const codes = reactive({
	validCodeBase64: '', //图片地址
	validCodeReqNo: '', //请求号
	codeVal: '', //验证码
})

const form = reactive({
	account: 'superadmin',
	password: '123456',
})

const key = {
	PublicKey:
		'04F41267B41D22E7FF71B5F10869B7E38DCE5B4E3B410108E5CDDB082C2A846C8FB1A70BC31CE7A4A441D4ABABD29AB4F031F4F19CF5963603BE541268374787FE', //公钥
	PrivateKey:
		'35C56BE2A224765C08E5A7436F4AEFB22B9C77E39E70456B3805424AE3C3AD28', //私钥
}

const getPic = () => {
	getPicCaptcha().then((res) => {
		const { validCodeBase64, validCodeReqNo } = res.data

		codes.validCodeBase64 = validCodeBase64
		codes.validCodeReqNo = validCodeReqNo
	})
}
getPic()
const upDateImg = () => {
	getPic()
}

const onLogin = () => {
	if (!form.account || !form.password) {
		uni.showToast({
			title: '输入账号或密码',
			icon: 'error',
		})
		return
	}

	console.log(codes.codeVal)
	if (!codes.codeVal) {
		uni.showToast({
			title: '验证码不能为空',
			icon: 'error',
		})
		return
	}

	form.password = sm2.doEncrypt(form.password, key.PublicKey, cipherMode)
	login({
		validCode: codes.codeVal,
		validCodeReqNo: codes.validCodeReqNo,
		account: form.account,
		password: form.password,
		device: 3,
	}).then((res) => {
		if (res.msg !== '请求成功') {
			form.account = ''
			form.password = ''
			codes.validCodeReqNo = ''
			codes.codeVal = ''
			getPic()
			uni.showToast({
				title: res.msg,
				duration: 2000,
				icon: 'error',
			})
			return
		}

		if (res.data.token) {
			uni.setStorageSync('token', res.data.token)
			uni.setStorageSync('userData', res.data.user)
			uni.switchTab({
				url: '/pages/index/index',
			})
		}
	})
}
</script>

<style scoped lang="scss">
.headers {
	padding: 80rpx 80rpx 40rpx 80rpx;

	.imgs {
		width: 310rpx;
		height: 310rpx;
		margin: auto;
		// background-color: #4d8ff0;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;

		image {
			width: 100%;
			height: 100%;
		}
	}
}

.formbox {
	padding: 0 10px;
}

._rows {
	display: flex;
	justify-content: space-between;
	align-items: center;
}
</style>